<template>
  <div class="allprolist pt30 d-block">
    <vt-tabs
      ref="myTabs"
      class="px15"
      @tabs-act-tab="tabsActTab"
      :actTab="params"
      ulClass="fz16 clr7 pos-s t0 bgc14"
      liClass="h38 flx-mm"
      actClass="fwb clr5 bdb5 bdbw2"
      unactClass="bdb13 bdbw2"
    >
      <vt-tab
        v-for="(item, idx) in categoryData"
        :key="idx"
        :title="item.title"
        class="flx flx-w-w pt20"
      >
        <Pro
          v-for="(i, n) in item.data"
          :pro="i"
          :key="n"
          :url="'/product?pid='+i.product_id"
          class="flx-s-0 w50p"
          :class="(idx%2)===0?'pr5':'pl5'"
        />
      </vt-tab>
    </vt-tabs>
  </div>
</template>

<script>
  import Pro from 'components/index/pro'
  import { myTools } from "../../../assets/myTools/jsTools/jsTools"

  export default {
  components: {
    Pro
  },
  props: {
    params: {
      type: String,
      default() {
        return ''
      }
    }
  },
  data () {
    return {
      tabsCurTab: '',
      categoryData: [
        {
          category: 'all',
          title: '推荐',
          data: []
        },
        {
          category: 'classic',
          title: '豆瓣经典',
          icon: 'fa fa-shopping-bag',
          data: []
        },
        {
          category: 'homelife',
          title: '家居生活',
          icon: 'fa fa-coffee',
          data: []
        },
        {
          category: 'travel',
          title: '外出旅行',
          icon: 'fa fa-suitcase',
          data: []
        },
        {
          category: 'stationery',
          title: '文具小物',
          icon: 'fa fa-book',
          data: []
        },
      ]
    }
  },
  async created () {
    let arr = this.categoryData
    for (let i in arr){
      
	  let {status, data} = await this.$axiosApi.postIndexAllCategoryGoodsList({
        category: arr[i].category,
        start: arr[i].data.length,
        count: 10
      })
	  if(status === 200 && data.code === 0) {
		arr[i].data = data.data
	  }
    }
  },
  mounted() {
    let Arr = this.categoryData
    let _this = this
    let _botReq = myTools.debounce(async function() {
      if (myTools.isToBottom()) {
        let idx = myTools.arrSomeItem(Arr, 'title', _this.tabsCurTab)
        let arr
		let {status, data} = await _this.$axiosApi.postIndexAllCategoryGoodsList({
          category: Arr[idx].category,
          start: Arr[idx].data.length,
          count: 10
        })
		if(status === 200 && data.code === 0) {
			arr = data.data
		}
        arr.forEach((item) => {
          Arr[idx].data.push(item)
        })
      }
    }, 300)

    addEventListener('scroll', function () {
      _botReq(1,2)
    })
  },
  methods: {
    /*async getData(params) {
      let data = await myTools.axiosPost(this, '/goods/category', params)
      if(data.code === 0) {
        return data.data
      }
    },*/
    tabsActTab(i){
      this.tabsCurTab = i
    }
  }
}
</script>

<style scoped lang="stylus">
/*.tabs
  position sticky
  top 0*/
</style>
